<template>
    <div class="scenario-card" @click="selectScenario" :class="{ selected: isSelected }">
        <!-- 场景缩略图 -->
        <div class="scenario-thumbnail">
            <van-image :src="scenario.thumbnail || '/default-scenario.jpg'" fit="cover" width="100%" height="120"
                :alt="scenario.title" />
            <div class="scenario-overlay">
                <div class="difficulty-badge">
                    <van-tag :type="getDifficultyType(scenario.difficulty)" size="small">
                        {{ scenario.difficulty }}
                    </van-tag>
                </div>
                <div v-if="scenario.is_popular" class="popular-badge">
                    <van-icon name="fire-o" color="#ff976a" size="14" />
                    <span>Popular</span>
                </div>
            </div>
        </div>

        <!-- 场景信息 -->
        <div class="scenario-info">
            <div class="scenario-header">
                <h3 class="scenario-title">{{ scenario.title }}</h3>
                <div class="scenario-category">
                    <van-tag size="small" plain>{{ scenario.category }}</van-tag>
                </div>
            </div>

            <p class="scenario-description">{{ scenario.description }}</p>

            <!-- 场景目标 -->
            <div class="scenario-objectives" v-if="scenario.objectives && scenario.objectives.length > 0">
                <div class="objectives-header">
                    <van-icon name="flag-o" size="14" />
                    <span>Objectives:</span>
                </div>
                <ul class="objectives-list">
                    <li v-for="objective in scenario.objectives.slice(0, 2)" :key="objective">
                        {{ objective }}
                    </li>
                    <li v-if="scenario.objectives.length > 2" class="more-objectives">
                        +{{ scenario.objectives.length - 2 }} more...
                    </li>
                </ul>
            </div>

            <!-- 技能标签 -->
            <div class="scenario-skills" v-if="scenario.skills && scenario.skills.length > 0">
                <div class="skills-header">
                    <van-icon name="medal-o" size="14" />
                    <span>Skills:</span>
                </div>
                <div class="skills-tags">
                    <van-tag v-for="skill in scenario.skills.slice(0, 3)" :key="skill" size="small" type="primary" plain
                        class="skill-tag">
                        {{ skill }}
                    </van-tag>
                    <span v-if="scenario.skills.length > 3" class="more-skills">
                        +{{ scenario.skills.length - 3 }}
                    </span>
                </div>
            </div>

            <!-- 场景统计 -->
            <div class="scenario-stats">
                <div class="stat-item">
                    <van-icon name="clock-o" size="14" />
                    <span>{{ scenario.estimated_duration }}min</span>
                </div>
                <div class="stat-item">
                    <van-icon name="star-o" size="14" />
                    <span>{{ scenario.rating || 4.3 }}</span>
                </div>
                <div class="stat-item">
                    <van-icon name="play-circle-o" size="14" />
                    <span>{{ scenario.total_sessions || 0 }}</span>
                </div>
            </div>
        </div>

        <!-- 选中状态指示器 -->
        <div v-if="isSelected" class="selected-indicator">
            <van-icon name="success" color="#07c160" size="20" />
        </div>

        <!-- 收藏按钮 -->
        <div class="favorite-action">
            <van-button size="small" :icon="scenario.is_favorited ? 'star' : 'star-o'"
                :type="scenario.is_favorited ? 'warning' : 'default'" @click.stop="toggleFavorite" round />
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { showToast } from 'vant'
import type { TrainingScenario } from '@/api'

interface Props {
    scenario: TrainingScenario
    selected?: boolean
}

interface Emits {
    (e: 'select', scenario: TrainingScenario): void
    (e: 'favorite', scenario: TrainingScenario): void
}

const props = withDefaults(defineProps<Props>(), {
    selected: false
})

const emit = defineEmits<Emits>()

const isSelected = computed(() => props.selected)

const getDifficultyType = (difficulty: string) => {
    switch (difficulty.toLowerCase()) {
        case 'beginner':
            return 'success'
        case 'intermediate':
            return 'warning'
        case 'advanced':
            return 'danger'
        default:
            return 'default'
    }
}

const selectScenario = () => {
    emit('select', props.scenario)
}

const toggleFavorite = () => {
    emit('favorite', props.scenario)
    showToast({
        type: 'success',
        message: props.scenario.is_favorited ? 'Removed from favorites' : 'Added to favorites'
    })
}
</script>

<style lang="scss" scoped>
.scenario-card {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    &.selected {
        border-color: #1989fa;
        box-shadow: 0 4px 16px rgba(25, 137, 250, 0.3);
    }

    &:active {
        transform: translateY(0);
    }

    .scenario-thumbnail {
        position: relative;
        width: 100%;
        height: 120px;

        .scenario-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
            padding: 8px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .difficulty-badge {
                background: rgba(255, 255, 255, 0.9);
                border-radius: 12px;
                padding: 2px 6px;
            }

            .popular-badge {
                display: flex;
                align-items: center;
                gap: 4px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 12px;
                padding: 4px 8px;
                font-size: 12px;
                color: #ff976a;
                font-weight: 500;
            }
        }
    }

    .scenario-info {
        padding: 16px;

        .scenario-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;

            .scenario-title {
                font-size: 16px;
                font-weight: 600;
                color: #323233;
                margin: 0;
                flex: 1;
                line-height: 1.4;
            }

            .scenario-category {
                margin-left: 8px;
                flex-shrink: 0;
            }
        }

        .scenario-description {
            font-size: 14px;
            color: #646566;
            line-height: 1.5;
            margin: 0 0 12px 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .scenario-objectives {
            margin-bottom: 12px;

            .objectives-header {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: #646566;
                font-weight: 500;
                margin-bottom: 6px;

                .van-icon {
                    color: #1989fa;
                }
            }

            .objectives-list {
                margin: 0;
                padding-left: 16px;
                font-size: 12px;
                color: #646566;

                li {
                    margin-bottom: 2px;
                    line-height: 1.4;

                    &.more-objectives {
                        color: #969799;
                        font-style: italic;
                    }
                }
            }
        }

        .scenario-skills {
            margin-bottom: 12px;

            .skills-header {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: #646566;
                font-weight: 500;
                margin-bottom: 6px;

                .van-icon {
                    color: #f39c12;
                }
            }

            .skills-tags {
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: wrap;

                .skill-tag {
                    font-size: 11px;
                }

                .more-skills {
                    font-size: 11px;
                    color: #969799;
                }
            }
        }

        .scenario-stats {
            display: flex;
            gap: 16px;

            .stat-item {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: #646566;

                .van-icon {
                    color: #969799;
                }
            }
        }
    }

    .selected-indicator {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 2;
    }

    .favorite-action {
        position: absolute;
        bottom: 16px;
        right: 16px;
    }
}
</style>